import React, { useState } from 'react';
import {  type  RemediationItem } from '@/types/Remediation';
import RemediationItemCard from './RemediationItemCard';
import SearchBar from './SearchBar';
import { StatusFilterTabs, RiskLevelFilterTabs } from './FilterTabs';
import { useRemediation } from '@/contexts/RemediationContext';
import { showMessage } from '@/components/common/MessageTip';

interface RemediationListProps {
  onEdit: (item: RemediationItem) => void;
  onDelete: (id: string) => void;
}

const RemediationList: React.FC<RemediationListProps> = ({ onEdit, onDelete }) => {
  const { 
    filteredItems, 
    filters, 
    setFilters,
    toggleStatus 
  } = useRemediation();
  
  // 处理状态切换
  const handleToggleStatus = async (id: string) => {
    try {
      const updatedItem = await toggleStatus(id);
      if (updatedItem) {
        const newStatus = updatedItem.status === 'completed' ? '已完成' : '整改中';
        showMessage('success', `整改项状态已更新为${newStatus}`);
      } else {
        showMessage('warning', '状态更新未完成，请重试');
      }
    } catch (error) {
      showMessage('error', `状态更新失败: ${error instanceof Error ? error.message : '未知错误'}`);
    }
  };
  
  const [showFilters, setShowFilters] = useState(false);
  
  // 处理搜索
  const handleSearch = (searchTerm: string) => {
    setFilters({ searchTerm });
  };
  
  // 处理状态筛选
  const handleStatusFilter = (status: 'all' | string) => {
    setFilters({ status: status as any });
  };
  
  // 处理风险等级筛选
  const handleRiskLevelFilter = (riskLevel: 'all' | string) => {
    setFilters({ riskLevel: riskLevel as any });
  };
  
  return (
    <div className="bg-card rounded-lg border p-4">
      <div className="flex justify-between items-center mb-4">
        <h2 className="text-lg font-semibold">整改台账</h2>
        <div className="flex items-center space-x-2">
          <div className="w-64">
            <SearchBar
              value={filters.searchTerm}
              onChange={handleSearch}
              placeholder="搜索风险名称或建议..."
            />
          </div>
          <button
            onClick={() => setShowFilters(!showFilters)}
            className="p-2 border rounded-md hover:bg-muted transition-colors"
            title={showFilters ? "收起筛选" : "展开筛选"}
          >
            <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
            </svg>
          </button>
        </div>
      </div>
      
      {showFilters && (
        <div className="mb-4 p-4 bg-muted/30 rounded-lg space-y-3">
          <div>
            <p className="text-sm font-medium mb-2">状态</p>
            <StatusFilterTabs
              value={filters.status}
              onChange={handleStatusFilter}
            />
          </div>
          <div>
            <p className="text-sm font-medium mb-2">风险等级</p>
            <RiskLevelFilterTabs
              value={filters.riskLevel}
              onChange={handleRiskLevelFilter}
            />
          </div>
        </div>
      )}
      
      <div className="space-y-4">
        {filteredItems.length > 0 ? (
          filteredItems.map(item => (
            <RemediationItemCard
              key={item.id}
              item={item}
              onEdit={onEdit}
              onDelete={onDelete}
              onToggleStatus={handleToggleStatus}
            />
          ))
        ) : (
          <div className="text-center py-8 text-muted-foreground">
            {filters.searchTerm || filters.status !== 'all' || filters.riskLevel !== 'all'
              ? '没有找到匹配的整改项'
              : '暂无整改项，请点击"新增整改项"按钮创建'}
          </div>
        )}
      </div>
    </div>
  );
};

export default RemediationList;
